<template>
    <div class="page_1">
        <div class="top_box">
            <div style="width:400px;margin-left:10px">
                <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <el-button type="warning" style="margin-left:20px" icon="el-icon-search" size="small" @click="getInfo">搜索</el-button>
            <el-button style="margin-left:20px" type="primary" size="small" @click="reset">重置</el-button>
            <el-button type="primary" style="margin-left:20px" icon="el-icon-upload" size="small " @click="leadingOut">导出</el-button>
        </div>

        <table class="el-table" border cellpadding="0" style="border-collapse: collapse;">
            <thead>
                <th class="el-table__cell" v-for="(item, index) in data" :key="`header-${index}`">
                    {{ item.name }}
                </th>
            </thead>

            <tbody>
                <tr v-for="(item, index) in newdata" :key="`item-${index}`">
                    <td class="el-table__cell" v-for="(ite, inde) in data" :key="`item-${index}-${inde}`" style="text-align: center">
                        {{ item.department[inde] }}</td>
                </tr>
            </tbody>
        </table>

        <!-- 表单 -->
        <el-dialog :visible.sync="dialogVisible" title="编辑" append-to-body width="600px" @close="formReset">
            <el-form ref="form" :model="form" label-width="80px">
                <el-row type="flex" :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="头像" prop="avatar">
                            <el-upload-image v-model="form.avatar"></el-upload-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="form.mobile"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-button type="primary" @click="initiate()">发布</el-button>
                    <el-button @click="formReset()">重置</el-button>
                </el-row>
            </el-form>
        </el-dialog>

        <!-- 中奖记录 -->
        <el-dialog :visible.sync="dialogVisible1" title="中奖记录" append-to-body width="1000px">
            <el-table :data="winningList" style="width: 100%" border>
                <el-table-column prop="username" label="用户名">
                </el-table-column>
                <el-table-column prop="mobile" label="手机号">
                </el-table-column>
                <el-table-column prop="prize" label="中奖奖项">
                </el-table-column>
                <el-table-column prop="desc" label="奖品描述">
                </el-table-column>
                <el-table-column prop="money" label="中奖话费金额">
                </el-table-column>
                <el-table-column prop="create_time" label="中奖时间">
                    <template slot-scope="{row}">
                        {{ comTime(row.create_time) }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination class="main-pagination" :total="total" :current-page.sync="page" :page-size="limit" layout="prev, pager, next, jumper,total" @current-change="getInfo" hide-on-single-page></el-pagination>
        <!-- 不加就有问题   不理解 -->
        <div class="dashboard-charts">
            <v-chart class="dashboard-chart" autoresize></v-chart>
            <v-chart class="dashboard-chart" autoresize></v-chart>
        </div>
    </div>
</template>

<script>
import {
    get, del, post
} from "@/assets/js/http.js";
import queryString from "qs"
export default {
    components: {
        "el-upload-image": () => import("@/components/el-upload-image.vue")
    },
    data() {
        return {
            total: 0,
            limit: 10,
            page: 1,
            search: "",
            p_road_name: "",
            time: [],
            isAnswer: "",
            data: [],
            dialogVisible: false,
            dialogVisible1: false,
            // adminUserList: [],
            admin_id: "",
            newdata: [],
            guanlidata: [],
            form: {
                avatar: [],
                username: '',
                mobile: ""
            },
            winningList: [],
            isAnswerList: [
                {
                    id: '1',
                    name: "未答题"
                },
                {
                    id: '2',
                    name: "已答题"
                }
            ],
            props: {
                label: "nickname",
                value: "id",
                lazy: true,
                async lazyLoad(node, resolve) {
                    const { level, value } = node;
                    if (level === 0) {
                        const result = await post({
                            url: "/admin/answer.Road/admin_user",
                            data: {}
                        });
                        resolve(result);
                    }
                    else if (level === 1) {
                        const result = await post({
                            url: "/admin/answer.Road/index",
                            data: {
                                admin_id: value,
                                limit: 50,
                            }
                        });
                        result.data.forEach((item) => {
                            // item.leaf = true
                            item.nickname = item.road_name
                        });
                        console.log(result.data, 1)
                        resolve(result.data);
                    }
                    else if (level === 2) {
                        console.log(node, "node");
                        const result = await post({
                            url: "/admin/answer.Road/act_road",
                            data: {
                                road_number: node.data.road_number
                            }
                        });
                        console.log(result, "aaaaa");
                        result.data.forEach((item) => {
                            item.leaf = true
                            item.nickname = item.name
                        });
                        resolve(result.data);
                    }

                },
            }
        }
    },
    methods: {
        // 请求初始数据
        getInfo(index = 1) {
            let time = []
            if (this.time.length != 0) {
                time = this.time.map(item =>
                    item / 1000
                )
            }
            post({
                url: "/admin/answer.Census/agree_cate",
                data: {
                    page: index,
                    limit: this.limit,
                    search: this.search,
                    is_answer: this.isAnswer,
                    admin_id: this.admin_id,
                    p_road_name: this.p_road_name,
                    time
                },
                loading: true,

            }).then(res => {
                this.total = res.total          //总数
                res.menu.forEach((item, index) => {
                    console.log(index)
                })
                this.data = res.menu;
                this.newdata = res.list
                this.getnewlist()
            })
        },
        //获取新的列表
        getnewlist() {

            // for(let k=0;k < this.data.length;k++){
            // 	this.data[k].department.unshift({num:this.data[k].nickname,name:'管理中心'})
            // 	this.data[k].department.push({num:this.data[k].my,name:'满意'})
            // 	this.data[k].department.push({num:this.data[k].yb,name:'一般'})
            // 	this.data[k].department.push({num:this.data[k].bmy,name:'不满意'})
            // }
            // for(let i=0;i < this.data[0].department.length;i++){
            // 	this.newdata.push({label:this.data[0].department[i].name,num:this.data[0].department[i].num})
            // }
            console.log(this.data, 'this.newdata', this.newdata)
        },
        // 获取管理中心列表
        // adminUser() {
        //     post({
        //         url: "/admin/answer.Road/admin_user"
        //     }).then(res => {
        //         this.adminUserList = res
        //     })
        // },
        // 编辑数据
        edit(row) {
            this.formReset()
            this.dialogVisible = true
            let form = JSON.parse(JSON.stringify(row))
            form.avatar = [{ url: row.avatar, name: row.avatar }]
            this.form = form
            // this.form.username = form.username
            // this.form.mobile = form.mobile
            // this.form.id = form.id
        },
        // 表单提交
        initiate() {
            let data = JSON.parse(JSON.stringify(this.form))
            data.avatar = data.avatar[0].url
            post({
                url: "/admin/user.User/edit",
                data,
                loading: true,
                successTip: true,
            }).then(res => {

            }).finally(() => {
                this.dialogVisible = false
                this.getInfo(this.page)
            })
        },
        // 查看中奖记录
        winningRecord(row) {
            post({
                url: "/admin/answer.Prize/prize_log",
                data: {
                    uid: row.id
                }
            }).then(res => {
                console.log(res);
                this.winningList = res.list.data
                this.dialogVisible1 = true
            })
        },
        // 表单关闭回调
        formReset() {
            this.form = Object.assign({}, this.$options.data().form)
        },
        // 重置
        reset() {
            this.search = ""
            this.isAnswer = ""
            this.time = []
            this.getInfo()
        },
        // 导出
        leadingOut() {
            let time = []
            if (this.time.length != 0) {
                time = this.time.map(item =>
                    item / 1000
                )
            }
            if (localStorage.getItem('role') && localStorage.getItem('id')) {
                open("http://nhcj.app65.cn/api/realmerit/answer_export?" + queryString.stringify({
                    // id: localStorage.getItem('id'),
                    // role: localStorage.getItem('role'),
                    // search: this.search,
                    time,
                    // is_answer: this.isAnswer,
                }))
            }
        },
    },
    computed: {
        comTime() {
            return (time) => {
                const d = new Date(time * 1000);
                let nian = d.getFullYear();
                let yue = d.getMonth();
                let ri = d.getDate();
                return `${nian}-${yue + 1}-${ri}`;
            };
        },
    },
    mounted() {
        this.getInfo()
        // this.adminUser()
    },

}

</script>
<style scoped lang="scss">
// :v-deep .el-table .el-table__cell {
//     text-align: center !important;
// }
</style>
